<template>
  <div class="other-setting">
    <div class="other-title">
      <span>{{$t('header.OtherSetting')}}</span>
    </div>
    <div class="other-content">
      <!-- 店铺设置 -->
      <div class="shop-setting"
           v-loading="shopLoading">
        <div class="setting-title">
          <span>{{$t('setting.shopSettingTitle')}}</span>
        </div>
        <el-form ref="form"
                 label-position="right"
                 :model="form"
                 label-width="130px"
                 size="small">


          <el-form-item :label="$t('setting.endDate')">
            <el-input v-model="shopInfo.endtime"
                      clearable readonly></el-input>
          </el-form-item>

          <el-form-item :label="$t('setting.shopId')">
            <el-input v-model="shopInfo.id"
                      clearable readonly></el-input>
          </el-form-item>
          <!-- 店铺名称 -->
          <el-form-item :label="$t('setting.shopName')">
            <el-input v-model="shopInfo.shopname"
                      clearable></el-input>
          </el-form-item>

          <!-- 店铺公告 -->
          <el-form-item :label="$t('setting.announcement')">
            <el-input v-model="shopInfo.notice_info"
                      clearable></el-input>

            <el-input v-model="shopInfo.en_notice_info"
                      clearable></el-input>

            <el-input v-model="shopInfo.de_notice_info"
                      clearable></el-input>

            <el-input v-model="shopInfo.zn_notice_info"
                      clearable></el-input>

          </el-form-item>
          <!-- 语言选择 -->

          <el-form-item :label="$t('setting.languagechoice')">
            <template>

              <el-select v-model="value1"
                         clearable
                         :placeholder="$t('setting.languagechoice')">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.value"
                           :value="item.label">
                </el-option>
              </el-select>

              <el-select v-model="value2"
                         clearable
                         :placeholder="$t('setting.Language1')">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.value"
                           :value="item.label">
                </el-option>
              </el-select>

              <el-select v-model="value3"
                         clearable
                         :placeholder="$t('setting.Language2')">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.value"
                           :value="item.label">
                </el-option>
              </el-select>

              <el-select v-model="value4"
                         clearable
                          :placeholder="$t('setting.Language')">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.value"
                           :value="item.label">
                </el-option>
              </el-select>
            </template>

          </el-form-item>

          <!-- 营业时间 -->
          <el-form-item :label="$t('setting.starttime')">
            <el-input v-model="shopInfo.starttime"
                      clearable></el-input>
          </el-form-item>

          <!-- 店铺banner -->
          <el-form-item :label="$t('setting.banner')">
            <div>
              <div v-for="(item,index) in bannerList"
                   :key="index"
                   class="first-right">
                <div class="banner-img">
                  <div v-if="item.src">
                    <div class="good-img-name">
                      {{item.name}}
                    </div>
                    <img src="../../assets/imgs/del.png"
                         style="width: 30px;height: 30px;display: none"
                         class="good-img-del"
                         @click="bannerFileDel((index+1))">
                    <img :src="item.src"
                         width="145"
                         height="69">

                  </div>

                  <img v-else-if="shopBannerList[index]"
                       :src="shopBannerList[index]"
                       width="187"
                       height="67">

                  <span v-else>{{$t('setting.shopBannerRequirement')}}</span>
                  <input @change="fileChange($event,(index+1))"
                         type="file"
                         class="banner_upload_file"
                         multiple
                         style="display: none" />
                </div>

                <div class="good-img-op">
                  <el-input v-model="bannerLink[index]"
                            :placeholder="$t('setting.pleaseenterjumpaddress')"></el-input>
                  <el-button style="margin-bottom: 22px;"
                             @click="fileClick((index+1))"
                             class="banner-btn">{{$t('common.selectFile')}}</el-button>
                  <el-button type="primary"
                             style="margin-bottom: 22px;"
                             @click="uploadImg((index+1))"
                             :disabled="!item.src">{{$t('common.uploadImg')}}
                  </el-button>
                </div>

              </div>

            </div>
          </el-form-item>

          <!-- 货币单位 -->
          <el-form-item :label="$t('setting.currency')">
            <el-input v-model="shopInfo.currencydefault"
                      clearable></el-input>
          </el-form-item>
          <!-- 餐厅类型 -->
          <el-form-item :label="$t('setting.shopType')">
            <el-select style="width: 239px;"
                       v-model="shopInfo.typeshop"
                       clearable
                       disabled 
                       :placeholder="$t('setting.shopType')">
              <el-option :label="$t('setting.buffet')"
                         value="1"></el-option>
              <el-option :label="$t('setting.restaurant')"
                         value="0"></el-option>
              <el-option :label="$t('setting.takeawayRestaurant')"
                         value="2"></el-option>
            </el-select>
          </el-form-item>
          <!-- 店铺logo -->
          <el-form-item :label="$t('setting.shopLogo')">
            <div class="first-right">
              <div class="good-img">
                <div v-if="imgFront.src">
                  <div class="good-img-name">
                    {{imgFront.name}}
                  </div>
                  <img src="../../assets/imgs/del.png"
                       style="width: 30px;height: 30px"
                       class="good-img-del"
                       @click="fileDel">
                  <img :src="imgFront.src"
                       width="141"
                       height="143">
                </div>
                <img v-else-if="shopInfo.shoplogo"
                     :src="shopInfo.shoplogo"
                     width="141"
                     height="143">
                <span v-else>{{$t('setting.shopLogoRequirement')}}</span>
                <input @change="fileChange($event,0)"
                       type="file"
                       id="upload_file"
                       multiple
                       style="display: none" />
              </div>
              <div class="good-img-op">
                <el-button style="margin-bottom: 22px;"
                           @click="fileClick(0)">{{$t('common.selectFile')}}</el-button>
                <el-button type="primary"
                           style="margin-bottom: 22px;"
                           @click="uploadImg(0)"
                           :disabled="!imgFront.src">{{$t('common.uploadImg')}}
                </el-button>
              </div>
            </div>
          </el-form-item>
          <!-- 电话 -->
          <el-form-item :label="$t('setting.phone')">
            <el-input v-model="shopInfo.phone"
                      clearable></el-input>
          </el-form-item>
          <!-- 地址 -->
          <el-form-item :label="$t('setting.address')">
            <el-input v-model="shopInfo.address"
                      clearable></el-input>
          </el-form-item>

          <el-form-item :label="$t('setting.pass')">
            <el-input v-model="password"
                      clearable></el-input>
          </el-form-item>

        </el-form>
        <div class="save-setting">
          <el-button type="primary"
                     @click="saveShopInfo">{{$t('setting.saveSetting')}}</el-button>
        </div>
        <div class="table-btn">
          <el-button type="primary"
                     @click="dialogVisible = true">{{$t('setting.tableSetting')}}</el-button>
        </div>
      </div>
      <!-- 点餐设置 -->
      <div class="order-setting"
           v-loading="settingLoading">
        <div class="setting-title">
          <span>{{$t('setting.ordersetting')}}</span>
        </div>
        <el-form ref="form"
                 label-position="right"
                 :model="form"
                 label-width="130px"
                 size="small">
          <!-- 店铺名称 -->
          <el-form-item :label="$t('setting.maximumperson')">
            <el-input v-model="orderSetting.max"
                      clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('setting.orderinterval')">
            <el-input v-model="orderSetting.intervaltime"
                      clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('setting.maximumnseats')">
            <el-input v-model="orderSetting.personcount"
                      clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('setting.switchtablelimit')" >
            <el-switch v-model="orderSetting.is_opentablelimit"
                       active-value="1"
                       inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item :label="$t('setting.callservice')" >
            <el-switch v-model="orderSetting.is_opencall"
                       active-value="1"
                       inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item v-if="orderSetting.is_opencall == 1"
                        :label="$t('setting.Callinterval')">
            <el-input v-model="orderSetting.callintervaltime"
                      clearable></el-input>
          </el-form-item>
          <el-form-item :label="$t('setting.theredrinks')">
            <el-switch v-model="orderSetting.is_drinks_unlimit"
                       active-value="1"
                       inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item :label="$t('setting.thereisdecimalPoint')">
            <el-input v-model="orderSetting.ip_address"
                      clearable></el-input>
          </el-form-item>
          <el-form-item v-if="shopInfo.typeshop == 1"
                      :label="$t('setting.adultprice')">
            <el-input v-model="orderSetting.adult_price"
                      clearable></el-input>
          </el-form-item>
          <el-form-item v-if="shopInfo.typeshop == 1"
                      :label="$t('setting.childrenprice')" >
            <el-input v-model="orderSetting.child_price"
                      clearable></el-input>
          </el-form-item>
        </el-form>
        <div class="save-setting">
          <el-button type="primary"
                     @click="saveOrderSetting">{{$t('setting.saveSetting')}}</el-button>
        </div>

      </div>



    </div>



    <!-- 声明 -->
    <p class="statement">{{$t('setting.disclaimer')}}</p>
    <!-- 桌号设置 -->
    <el-dialog :title="$t('common.prompt')"
               :visible.sync="dialogVisible"
               width="1020px"
               center>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="310px">
          <!-- 新增区域 -->
          <el-input style="margin-bottom: 10px;"
                    clearable
                    :placeholder="$t('setting.newArea')"
                    v-model="newArea">
            <template slot="append">
              <el-tooltip class="item"
                          effect="dark"
                          :content="$t('setting.newArea')"
                          placement="top">
                <span class="add-btn"
                      @click="addArea">{{$t('setting.newArea')}}</span>
              </el-tooltip>
            </template>
          </el-input>
          <!-- 区域列表 -->
          <draggable v-loading="loading"
                     v-model="areaList"
                     @update="areaSort">
            <transition-group>
              <!-- 区域 -->
              <div class="class-item-wrapper"
                   v-for="(area,index) in areaList"
                   :key="area.id">
                <div class="class-item">
                  <el-input style="margin-right: 10px;"
                            v-if="editAreaIndex==index&isEditArea"
                            :placeholder="$t('setting.areaName')"
                            clearable
                            v-model="editingArea.table_num"></el-input>
                  <span v-else
                        :style="index==activeIndex?'font-family:PingFang-SC-Semibold;color:#ff8214':''"
                        @click="getTableList(area,index)">{{area.table_num}}</span>
                  <!--关闭操作/保存操作按钮-->
                  <div class="btn-save"
                       v-if="isOpenHandle&isOpenIndex==index">
                    <!-- 取消操作 -->
                    <el-tooltip class="item"
                                effect="dark"
                                :content="$t('common.cancelOperation')"
                                placement="top">
                      <el-button icon="el-icon-close"
                                 circle
                                 @click="closeHandle"></el-button>
                    </el-tooltip>
                    <!-- 保存操作 -->
                    <el-tooltip class="item"
                                effect="dark"
                                :content="$t('common.saveOperation')"
                                placement="top">
                      <el-button type="success"
                                 icon="el-icon-check"
                                 circle
                                 @click="saveHandle"></el-button>
                    </el-tooltip>
                  </div>
                  <!-- 开启操作按钮 -->
                  <div v-else
                       class="open-handle-btn"
                       @click="openHandle(area, index)">
                    <el-tooltip class="item"
                                effect="dark"
                                placement="top">
                      <div slot="content">{{$t('common.sortPrompt1')}}<br />{{$t('common.sortPrompt2')}}</div>
                      <img src="../../assets/imgs/expand.png"
                           width="16"
                           height="13" />
                    </el-tooltip>
                  </div>
                </div>
                <!-- 编辑分类/删除分类/选择特殊类型 -->
                <div class="class-item"
                     v-if="isOpenHandle&isOpenIndex==index">
                  <div class="btn-op">
                    <el-button class="omit"
                               type="warning"
                               icon="el-icon-edit"
                               @click="editArea(area, index)">{{$t('setting.modifyName')}}</el-button>
                    <el-button class="omit"
                               type="danger"
                               icon="el-icon-delete"
                               @click="deleteArea(area)">{{$t('setting.deleteArea')}}</el-button>
                  </div>
                </div>
              </div>
            </transition-group>
          </draggable>
        </el-aside>
        <!---->
        <el-main>
          <div style="width: 630px;">
            <div style="padding-bottom: 10px;height: 40px;">
              <el-input style="width: 280px;float: right"
                        clearable
                        :placeholder="$t('setting.newTable')"
                        v-model="newTable">
                <template slot="append">
                  <el-tooltip class="item"
                              effect="dark"
                              :content="$t('setting.newTable')"
                              placement="top">
                    <span class="add-btn"
                          @click="addTable">
                      {{$t('setting.newTable')}}
                    </span>
                  </el-tooltip>
                </template>
              </el-input>
            </div>
            <div class="table-wrapper"
                 v-loading="tableLoading">
              <draggable v-model="tableList"
                         @update="tableSort">
                <transition-group>
                  <div class="table-item-wrapper"
                       v-for="(table, index) in tableList"
                       :key="table.id">
                    <div class="table-item">
                      <el-input style="margin-right: 10px;width: 170px;"
                                v-if="editTableIndex==index&isEditTable"
                                :placeholder="$t('setting.tableNum')"
                                clearable
                                v-model="editingTable.table_num"></el-input>
                      <span v-else
                            class="table-num">{{table.table_num}}</span>
                      <div style="float: right">
                        <div style="display: inline-block"
                             v-if="editTableIndex==index&isEditTable">
                          <el-tooltip class="item"
                                      effect="dark"
                                      :content="$t('common.cancelOperation')"
                                      placement="top">
                            <i class="el-icon-close icon-close"
                               @click="closeEditTable"></i>
                          </el-tooltip>
                          <el-tooltip class="item"
                                      effect="dark"
                                      :content="$t('common.saveOperation')"
                                      placement="top">
                            <i class="el-icon-check icon-save"
                               @click="saveEditTable"></i>
                          </el-tooltip>
                        </div>
                        <div style="display: inline-block"
                             v-else>
                          <el-tooltip class="item"
                                      effect="dark"
                                      :content="$t('common.edit')"
                                      placement="top">
                            <i class="el-icon-edit icon-edit"
                               @click="editTable(table,index)"></i>
                          </el-tooltip>
                          <el-tooltip class="item"
                                      effect="dark"
                                      :content="$t('common.deleteHandle')"
                                      placement="top">
                            <i class="el-icon-delete icon-delete"
                               @click="deleteTable(table)"></i>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                  </div>
                </transition-group>
              </draggable>
            </div>
          </div>
        </el-main>
      </el-container>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">{{$t('common.submit')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Vue from 'vue'
export default {
  name: 'OtherSetting',

  data () {
    return {
      //语言选择
      options: [
        {
          value: '中国',
          label: 'zh-CN'
        },
        {
          value: '德国',
          label: 'de'
        },
        {
          value: '英国',
          label: 'en'
        },
        {          value: '意大利',
          label: 'it'
        },
        {          value: '丹麦',
          label: 'da'
        },

        {          value: '法语',
          label: 'fr'
        },
        {          value: '荷兰语',
          label: 'af'
        },
        {          value: '葡萄牙',
          label: 'pt'
        },
        {          value: '瑞典',
          label: 'sv'
        },
        {          value: '西班牙',
          label: 'es'
        },

      ],
      value4: '',
      value1: '',
      value2: '',
      value3: '',
      shopInfo: {}, // 店铺信息
      bannerLink: [],//banner链接地址
      shopLoading: false, // 店铺信息加载
      orderSetting: {}, // 点餐设置
      settingLoading: false, // 点餐设置加载
      password: "",//密码
      form: {},
      size: 0, // 图片大小
      imgFront: {},
      bannerList: [],
      shopBannerList: [],
      newImg: '',
      dialogVisible: false, // dialog显示
      newArea: '', // 新增区域
      loading: false, // 区域加载
      tableLoading: false, // 桌号加载
      areaList: [], // 区域列表
      isOpenIndex: 0, // 开启操作的区域索引
      isOpenHandle: false, // 是否开启操作
      editAreaIndex: 0, // 开启编辑的区域索引
      isEditArea: false, // 是否开启编辑
      editingArea: {}, // 编辑的区域
      editTableIndex: 0, // 开启编辑的桌号索引
      isEditTable: false, // 桌号是否开启编辑
      editingTable: {}, // 编辑的桌号
      newTable: '', // 新增桌号
      tableList: [], // 桌号列表
      activeIndex: 0,
      payWayList: [],
      payWayLoading: false, // 支付方式加载
      dynamicValidateForm: {
        payWayList: [{
          payname: '',
          color: ''
        }]
      }
    }
  },

  props: {},

  components: {
    draggable
  },

  async created () {
    for (var i = 0; i < 3; i++) {
      let banner = {};
      let link = "";
      this.bannerList.push(banner);
      this.bannerLink.push(link);
    }
    // 获取店铺信息
    this.getShopInfo()
    // 获取点餐设置
    this.getOrderSetting()
    // 初始化区域列表
    let res = await this.$axios.get(`${this.$REQ_URL}shopcenter&action=get_table&shopid=${sessionStorage.getItem('shopId')}`)
    this.areaList = res.data.data
    this.getTableList(this.areaList[0])
  },

  watch: {
  },

  computed: {},

  filters: {},

  methods: {

    // 语言选择

    // 获取店铺信息
    getShopInfo () {
      this.shopLoading = true
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=shop_info&shopid=${sessionStorage.getItem('shopId')}`).then(res => {
        this.shopInfo = res.data.data
        let dateTime=res.data.data.endtime
        dateTime = parseInt(dateTime+ "000")
        this.shopInfo.endtime=new Date(dateTime).toLocaleDateString()
        
        if (this.shopInfo.shopbacklogo && this.shopInfo.shopbacklogo.length > 10) {
          this.shopBannerList = this.shopInfo.shopbacklogo.split(",");
        }
        if (this.shopInfo.bannerlink && this.shopInfo.bannerlink.length > 10) {
          this.bannerLink = this.shopInfo.bannerlink.split(",");
        }

        if (this.shopInfo.shoplan && this.shopInfo.shoplan.length > 0) {
          let shoplanarr = this.shopInfo.shoplan.split(",");
          for (var i = 1; i <= shoplanarr.length; i++) {
            this["value" + i] = shoplanarr[i - 1];
          }

        }

        this.shopLoading = false
      }).catch(_ => {
        this.$message({
          message: this.$t('setting.failedShopInfo'),
          type: 'error'
        })
      })
    },

    // 保存店铺信息
    saveShopInfo () {
      if (this.imgFront.src) {
        this.$message({
          message: this.$t('setting.uploadImg'),
          type: 'info'
        })
        return
      }

      for (var banner in this.bannerList) {
        if (banner.src) {
          this.$message({
            message: this.$t('setting.uploadImg'),
            type: 'info'
          })
          return
        }
      }

      let shopBanner = "";
      if (this.shopBannerList.length > 0) {
        shopBanner = this.shopBannerList.join(",");
      }

      let _bannerLink = "";
      if (this.bannerLink.length > 0) {
        _bannerLink = this.bannerLink.join(",");
      }

      let _shoplan = this.value1 + "," + this.value2 + "," + this.value3 + "," + this.value4;

      // let _shoplannotice = this.shopInfo

      const { shoplan, shoplogo, shopbacklogo, bannerlink, ...others } = this.shopInfo
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=SaveShopinfo`, {
        shopid: sessionStorage.getItem('shopId'),
        shopbacklogo: shopBanner,
        bannerlink: _bannerLink,
        shoplan: _shoplan,
        password: this.password,
        ...others,
        shoplogo: shoplogo.split('.com')[1]
      }).then(res => {
        if (res.data.state === 200) {
          this.$message({
            message: this.$t('common.successSave'),
            type: 'success'
          })
          this.newImg = {}
          this.getShopInfo()
        } else if (res.data.state === 400) {
          this.$message({
            message: this.$t('common.failedSave'),
            type: 'error'
          })
        }
      }).catch(_ => {
        this.$message({
          message: this.$t('common.failedSave'),
          type: 'error'
        })
      })
    },

    // 获取点餐设置
    getOrderSetting () {
      this.settingLoading = true
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=newusershopfast&shopid=${sessionStorage.getItem('shopId')}`).then(res => {
        this.orderSetting = res.data.data
        this.settingLoading = false
      }).catch(_ => {
        this.$message({
          message: this.$t('setting.failed'),
          type: 'error'
        })
      })
    },

    // 保存点餐设置
    saveOrderSetting () {
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=SaveShopfast`,
        this.orderSetting
      ).then(res => {
        if (res.data.state === 200) {
          this.$message({
            message: this.$t('common.successSave'),
            type: 'success'
          })
          this.getOrderSetting()
        } else if (res.data.state === 400) {
          this.$message({
            message: this.$t('common.failedSave'),
            type: 'error'
          })
        }
      }).catch(_ => {
        this.$message({
          message: this.$t('common.failedSave'),
          type: 'error'
        })
      })
    },

    // 获取支付方式列表
    getPayWayList () {
      this.payWayLoading = true
      this.$axios.get(`${this.$REQ_URL}app&action=pay_list&shopid=${sessionStorage.getItem('shopId')}`).then(res => {
        if (res.data.state === 1) {
          this.dynamicValidateForm.payWayList = res.data.data
          this.payWayLoading = false
        }
      })
    },

    // 获取区域列表
    getAreaList () {
      this.loading = true
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=get_table&shopid=${sessionStorage.getItem('shopId')}`).then(res => {
        this.areaList = res.data.data
        this.loading = false
      }).catch(() => {
        this.$message({
          message: this.$t('setting.failedAreaList'),
          type: 'error'
        })
      })
    },

    // 区域排序
    areaSort () {
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=table_sort`, this.areaList
      ).then(res => {
        if (res.data.state === 200) {
          this.$message({
            message: this.$t('common.successSort'),
            type: 'success'
          })
        }
        this.getAreaList()
      }).catch(_ => {
        this.$message({
          message: this.$t('common.failedSort'),
          type: 'error'
        })
      })
    },

    // 开启操作
    openHandle (area, index) {
      this.isOpenIndex = index
      this.isOpenHandle = true
      this.editingArea = { ...area }
    },

    // 关闭操作
    closeHandle () {
      this.isOpenHandle = false
      if (this.isEditArea) {
        this.isEditArea = false
      }
    },

    // 保存操作
    saveHandle () {
      if (!this.editingArea.table_num) {
        this.$message({
          type: 'warning',
          message: this.$t('setting.emptyArea')
        })
        return
      }
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=edittable&table_id=${this.editingArea.id}&table_num=${this.editingArea.table_num}`).then(res => {
        if (res.data.state === 200) {
          this.$message({
            type: 'success',
            message: this.$t('common.successSave')
          })
          this.isOpenHandle = false
          if (this.isEditArea) {
            this.isEditArea = false
          }
          this.getAreaList()
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: this.$t('common.failedSave')
        })
      })
    },

    // 获取桌号列表
    getTableList (area, index = 0) {
      this.activeIndex = index
      this.tableLoading = true
      let param = `&shopid=${sessionStorage.getItem('shopId')}`
      if (area) {
        param += `&area_id=${area.id}`
      }
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=get_table${param}`).then(res => {
        this.tableList = res.data.state === 1 ? res.data.data : []
        this.tableLoading = false
      }).catch(_ => {
        this.$message({
          message: this.$t('setting.failedTableList'),
          type: 'error'
        })
      })
    },

    // 区域排序
    tableSort () {
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=table_sort`, this.tableList
      ).then(res => {
        if (res.data.state === 200) {
          this.$message({
            message: this.$t('common.successSort'),
            type: 'success'
          })
        }
        this.getTableList(this.areaList[this.activeIndex], this.activeIndex)
      }).catch(_ => {
        this.$message({
          message: this.$t('common.failedSort'),
          type: 'error'
        })
      })
    },

    // 新增桌号
    addTable () {
      if (this.newTable === '') {
        this.$message.info(this.$t('setting.emptyTable'))
        return
      }
      let param = `&shopid=${sessionStorage.getItem('shopId')}&table_name=${this.newTable}&area_id=${this.areaList[this.activeIndex].id}`
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=AddTable${param}`).then(res => {
        if (res.data.state === 1) {
          this.$message({
            message: this.$t('common.successAdd'),
            type: 'success'
          })
          this.getTableList(this.areaList[this.activeIndex], this.activeIndex)
          this.newTable = ''
        } else if (res.data.state === 400) {
          this.$message({
            message: this.$t('setting.failedAddTable'),
            type: 'error'
          })
        } else if (res.data.state === -1) {
          // 桌号已经存在
          this.$message({
            message: res.data.msg,
            type: 'error'
          })
        }
      }).catch(_ => {
        this.$message({
          message: this.$t('setting.failedAddTable'),
          type: 'error'
        })
      })
    },

    // 删除桌号
    deleteTable (table) {
      this.$confirm(`${this.$t('setting.deleteTablePrompt')}:${table.table_num}`, this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel')
      }).then(() => {
        this.$axios.get(`${this.$REQ_URL}shopcenter&action=deltable&table_id=${table.id}`
        ).then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: this.$t('common.successDelete')
            })
            this.getTableList(this.areaList[this.activeIndex], this.activeIndex)
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: this.$t('common.failedDelete')
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('common.cancelDelete')
        })
      })
    },

    // 编辑桌号
    editTable (table, index) {
      this.editTableIndex = index
      this.isEditTable = true
      this.editingTable = { ...table }
    },

    // 关闭编辑桌号
    closeEditTable () {
      this.isEditTable = false
    },

    // 保存编辑桌号
    saveEditTable () {
      if (!this.editingTable.table_num) {
        this.$message({
          type: 'warning',
          message: this.$t('setting.emptyTable')
        })
        return
      }
      this.$axios.get(`${this.$REQ_URL}shopcenter&action=edittable&table_id=${this.editingTable.id}&table_num=${this.editingTable.table_num}`).then(res => {
        if (res.data.state === 200) {
          this.$message({
            type: 'success',
            message: this.$t('common.successSave')
          })
          this.isEditTable = false
          this.getTableList(this.areaList[this.activeIndex], this.activeIndex)
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: this.$t('common.failedSave')
        })
      })
    },

    // 新增区域
    addArea () {
      if (this.newArea === '') {
        this.$message.info(this.$t('setting.emptyArea'))
        return
      }
      let param = `&shopid=${sessionStorage.getItem('shopId')}&table_name=${this.newArea}`
      this.$axios.post(`${this.$REQ_URL}shopcenter&action=AddTable${param}`).then(res => {
        if (res.data.state === 1) {
          this.$message({
            message: this.$t('common.successAdd'),
            type: 'success'
          })
          this.getAreaList()
          this.newArea = ''
        } else if (res.data.state === 400) {
          this.$message({
            message: this.$t('setting.failedAddArea'),
            type: 'error'
          })
        }
      }).catch(() => {
        this.$message({
          message: this.$t('setting.failedAddArea'),
          type: 'error'
        })
      })
    },

    // 删除区域
    deleteArea (area) {
      this.$confirm(`${this.$t('setting.deleteAreaPrompt')}:${area.table_num}`, this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel')
      }).then(() => {
        this.$axios.get(`${this.$REQ_URL}shopcenter&action=deltable&table_id=${area.id}`
        ).then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: this.$t('common.successDelete')
            })
            this.getAreaList()
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: this.$t('common.failedDelete')
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('common.cancelDelete')
        })
      })
    },

    // 编辑分类
    editArea (area, index) {
      this.editAreaIndex = index
      this.isEditArea = true
    },

    // 上传图片
    uploadImg (type) {
      let uploadImage = this.imgFront;
      if (type >= 1) {
        uploadImage = this.bannerList[type - 1];
      }

      this.$axios.post(`${this.$REQ_URL}shopcenter&action=addgoodsimg`, {
        img: uploadImage.src.split(',')[1],
        shopid: sessionStorage.getItem('shopId')
      }).then(res => {
        if (res.data.state === 200) {
          if (type == 0) {
            this.shopInfo.shoplogo = res.data.img_url
            this.newImg = res.data.image_path
            this.imgFront = {}
          } else if (type >= 1) {
            Vue.set(this.shopBannerList, type - 1, res.data.img_url);
            Vue.set(this.bannerList, type - 1, {});
            // this.shopInfo.banner = res.data.img_url;
            // this.banner = {};
          }

          this.$message({
            type: 'success',
            message: this.$t('common.successUpload')
          })
        }
      }).catch(() => {
        this.$message({
          type: 'error',
          message: this.$t('common.failedUpload')
        })
      })
    },
    fileChange (el, type) {
      if (!el.target.files[0].size) return

      this.fileList(el.target, type)
      el.target.value = ''
    },
    fileClick (type) {
      if (type == 0) {
        document.getElementById('upload_file').click()
      } else if (type >= 1) {
        document.getElementsByClassName('banner_upload_file')[type - 1].click()
      }

    },
    fileAdd (file, type) {
      if (this.limit !== undefined) this.limit--
      if (this.limit !== undefined && this.limit < 0) return
      this.size = this.size + file.size
      if (file.type.indexOf('image') === -1) {
        file.src = 'file.png'
        if (type == 0) {
          this.imgFront = file;
        } else if (type >= 1) {
          let banner = file;

          Vue.set(this.bannerList, type - 1, banner);

        }

      } else {
        let reader = new FileReader()
        let image = new Image()
        let _this = this;
        reader.onload = function (fileItem) {
          file.src = this.result
          image.onload = () => {
            let width = image.width
            let height = image.height
            file.width = width
            file.height = height
            if (type == 0) {
              _this.imgFront = file;
            } else if (type >= 1) {
              let banner = file;
              console.log(banner);
              Vue.set(_this.bannerList, type - 1, banner);

            }

          }
          image.src = file.src
        }
        reader.readAsDataURL(file)
      }
    },
    fileList (fileList, type) {
      let files = fileList.files
      for (let i = 0; i < files.length; i++) {
        //  判断是否为文件夹
        if (files[i].type !== '') {
          this.fileAdd(files[i], type)
        } else {
          //  文件夹处理
          this.folders(fileList.items[i], type)
        }
      }
    },
    //  文件夹处理
    folders (files, type) {
      if (files.kind) {
        files = files.webkitGetAsEntry()
      }
      files.createReader().readEntries((file) => {
        for (let i = 0; i < file.length; i++) {
          if (file[i].isFile) {
            this.foldersAdd(file[i], type)
          } else {
            this.folders(file[i], type)
          }
        }
      })
    },
    foldersAdd (entry, type) {
      entry.file((file) => {
        this.fileAdd(file, uploadImage)
      })
    },
    // 删除图片
    fileDel () {
      this.size = this.size - this.imgFront.size
      this.imgFront = {}
      if (this.limit !== undefined) this.limit = this.imgFront.length
    },

    // 删除banner图片
    bannerFileDel (index) {
      let banner = this.bannerList[index - 1];
      this.size = this.size - banner.size
      banner = {}
      this.bannerList[index - 1] = banner;
    },

    // 保存支付方式
    savePayWay (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return
        }
        try {
          this.dynamicValidateForm.payWayList.forEach((item, index) => {
            if (!item.color) {
              this.$message({
                type: 'info',
                message: `支付方式${index + 1}的颜色值不能为空`
              })
              throw new Error('color is empty!')
            }
          })
        } catch (e) {
        }
        this.$axios.post(`${this.$REQ_URL}shopcenter&action=ChangePayWay&shopid=${sessionStorage.getItem('shopId')}`, this.dynamicValidateForm.payWayList).then(res => {
          if (res.data.state === 200) {
            this.$message({
              type: 'success',
              message: this.$t('common.successSave')
            })
            this.$refs[formName].resetFields()
            this.getPayWayList()
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: this.$t('common.failedSave')
          })
        })
      })
    },

    // 删除支付方式
    deletePayWay (item, index) {
      this.$confirm(`${this.$t('setting.deletePayWay')}${index}:${item.payname || ''}`, this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel')
      }).then(() => {
        if (!item.id) {
          const index = this.dynamicValidateForm.payWayList.indexOf(item)
          if (index !== -1) {
            this.dynamicValidateForm.payWayList.splice(index, 1)
          }
        } else {
          this.$axios.get(`${this.$REQ_URL}shopcenter&action=DelPay&shopid=
          ${sessionStorage.getItem('shopId')}&id=${item.id}`
          ).then(res => {
            if (res.data.state === 200) {
              this.$message({
                type: 'success',
                message: this.$t('common.successDelete')
              })
              this.getPayWayList()
            }
          }).catch(() => {
            this.$message({
              type: 'error',
              message: this.$t('common.failedDelete')
            })
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('common.cancelDelete')
        })
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain (item) {
      const index = this.dynamicValidateForm.payWayList.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.payWayList.splice(index, 1)
      }
    },
    addDomain () {
      this.dynamicValidateForm.payWayList.push({
        color: '#409EFF'
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/mixin";
.other-setting {
  background: $fc;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  padding: 0 40px;
  margin-bottom: 80px;
  .other-title {
    background: $fc;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #dedede;
    span {
      text-align: left;
      font-family: PingFang-SC-Semibold;
      font-size: 20px;
      font-weight: bold;
      color: #000;
      letter-spacing: 0;
    }
  }
  .other-content {
    @include fj(space-around);
    .shop-setting,
    .order-setting {
      flex: 0 0 490px;
      .setting-title {
        background: #ffffff;
        height: 80px;
        line-height: 80px;
        span {
          text-align: left;
          font-family: PingFang-SC-Semibold;
          font-size: 20px;
          font-weight: bold;
          color: #000;
          letter-spacing: 0;
        }
      }
      .save-setting {
        text-align: center;
        button {
          border-radius: 5px;
          width: 450px;
          margin-bottom: 20px;
        }
      }
    }
    .shop-setting {
      .first-right {
        display: flex;
        padding: 10px;
        .banner-img {
          flex: 0 0 143px;
          position: relative;
          height: 67px;
          width: 187px;
          border: 1px solid #dedede;
          border-radius: 2px;
          text-align: center;
          div {
            height: 67px;
            width: 187px;
          }
          img {
            height: 64px;
            width: 143px;
          }
          span {
            display: inline-block;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #ff2828;
            letter-spacing: 0;
          }

          .good-img-name {
            // display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background-color: rgba(0, 0, 0, 0.4);
            line-height: 20px;
            text-align: left;
            color: #fff;
            font-size: 12px;
            text-indent: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .good-img-del {
              position: absolute;
              top: 10px;
              right: 4px;
              cursor: pointer;
            }
          }
        }

        .good-img {
          flex: 0 0 143px;
          position: relative;
          height: 143px;
          width: 141px;
          border: 1px solid #dedede;
          border-radius: 2px;
          text-align: center;
          span {
            margin-top: 80px;
            display: inline-block;
            font-family: PingFang-SC-Regular;
            font-size: 12px;
            color: #ff2828;
            letter-spacing: 0;
          }

          .good-img-name {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.4);
            line-height: 50px;
            text-align: left;
            color: #fff;
            font-size: 12px;
            text-indent: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .good-img-del {
              position: absolute;
              top: 10px;
              right: 4px;
              cursor: pointer;
            }
          }
          .good-img-op {
            text-align: right;
            button {
              width: 140px;
            }
          }
        }
      }
      .table-btn {
        text-align: center;
        button {
          background-color: #ff8214;
          border-radius: 5px;
          border: 1px solid #ff8214;
          width: 450px;
          margin-bottom: 136px;
        }
      }
    }
  }
  .el-container {
    border-bottom: 1px solid #dedede;
    border-top: 1px solid #dedede;
    .el-aside {
      margin-top: 50px;
      padding-right: 10px;
      margin-bottom: 10px;
      border-right: 1px solid #dedede;
      .class-item-wrapper {
        border-bottom: 1px solid #dedede;
        cursor: pointer;
        .class-item {
          display: flex;
          height: 60px;
          line-height: 60px;
          span {
            margin-right: 5px;
            flex: 1;
            display: inline-block;
            font-family: PingFang-SC-Regular;
            font-size: 16px;
            color: #000000;
            letter-spacing: 0;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          >>> .el-input-group__append,
          .el-input-group__prepend {
            background-color: #ff8214;
            color: #ffffff;
            border: none;
            cursor: pointer;
          }
          .btn-save {
            flex: 0 0 95px;
            display: inline-block;
            float: right;
            padding-left: 10px;
            margin-right: 10px;
          }
          .open-handle-btn {
            height: 60px;
            line-height: 60px;
            padding-right: 12px;
          }
          .btn-op {
            text-align: center;
            padding-left: 10px;
            margin-right: 10px;
            button {
              width: 130px;
            }
            .omit {
              @include elli();
            }
          }
        }
      }
    }
    .el-main {
      width: 630px;
      padding-top: 50px;
      .add-btn {
        width: 56px;
        @include fja();
      }
      .table-wrapper {
        padding-top: 20px;
        border-top: 1px solid #dedede;
        .table-item-wrapper {
          display: inline-block;
          margin-bottom: 20px;
          background: $fc;
          border: 1px solid #dedede;
          border-radius: 8px;
          width: 299px;
          height: 58px;
          margin-right: 10px;
          .table-item {
            height: 60px;
            line-height: 60px;
            padding: 0 23px;
            .table-num {
              font-family: PingFang-SC-Semibold;
              font-size: 16px;
              color: #000000;
              letter-spacing: 0;
              text-align: left;
              font-weight: bold;
            }
          }
          .icon-save {
            font-weight: bold;
            color: #72bd1e;
          }
          .icon-edit {
            font-weight: bold;
            color: #ff8214;
            margin-right: 30px;
          }
          .icon-delete {
            font-weight: bold;
            color: #ff2828;
          }
          .icon-close {
            font-weight: bold;
            color: #ff2828;
            margin-right: 30px;
          }
        }
      }
    }
  }
  .dialog-footer button {
    background: #ff8214;
    border-radius: 5px;
    border: 1px solid #ff8214;
    width: 320px;
  }
}
.banner-btn {
  margin-left: 10px;
  margin-bottom: 6px !important;
}
.statement{
  text-align: center;
  font-size: 12px;
  color: #ccc;
  padding-bottom: 150px;
}
</style>
